:root {
  // Brand Color
  --brand-color: @brand-color;
  --vice-color: @vice-color;
  --vice-text-color: @vice-text-color;

  // 是故易有太极，是生两仪
  --black: @black;
  --white: @white;

  // Color Palette
  --gray-color-1: @gray-color-1;
  --gray-color-2: @gray-color-2;
  --gray-color-3: @gray-color-3;
  --gray-color-4: @gray-color-4;
  --gray-color-5: @gray-color-5;
  --gray-color-6: @gray-color-6;
  --gray-color-7: @gray-color-7;
  --gray-color-8: @gray-color-8;
  --red-color: @red-color;
  --blue-color: @blue-color;
  --orange-color: @orange-color;
  --green-color: @green-color;

  // SafeArea Height
  --safe-area-height-top: constant(safe-area-inset-top);
  --safe-area-height-top: env(safe-area-inset-top);
  --safe-area-height-bottom: constant(safe-area-inset-bottom);
  --safe-area-height-bottom: env(safe-area-inset-bottom);
}

.dark {
  // #0f1c29
  // Color Palette
  --brand-color: @brand-color;
  --black: @white;
  --white: rgb(36, 37, 37);
  --gray-color-1: rgba(0, 0, 0, 0.8);
  --gray-color-2: rgba(0, 0, 0, 0.8);
  --gray-color-3: rgba(229, 224, 216, 0.2);
  --gray-color-4: rgba(229, 224, 216, 0.2);
  --gray-color-5: rgba(229, 224, 216, 0.3);
  --gray-color-6: rgba(229, 224, 216, 0.45);
  --gray-color-7: rgba(229, 224, 216, 0.85);
  --gray-color-8: rgba(229, 224, 216, 0.85);
}
